<!-- 聊天、通讯录、收藏公共布局 -->
<template>
  <div class="dis-flex main-box">

    <!--  左侧  -->
    <div class="left-box">
      <!--  搜索  -->
      <slot name="searchBtn"></slot>
      <!--  搜索下方的列表  -->
      <div class="main-list">
        <slot name="mainLeftList"></slot>
      </div>
    </div>

    <!--  右侧  -->
    <template v-if="!isEmpty">
      <div class="right-box">
        <!--  右侧标题  -->
        <div class="right-title">
          <slot name="rightTitle"></slot>
        </div>
        <!--  右侧主内容  -->
        <div class="main-content-right">
          <slot name="mainRightContent"></slot>
        </div>
      </div>
    </template>

    <!-- 自定义空内容，暂时做通用的，后期如果需要，可以改为插槽 -->
    <template v-else>
      <div class="all-empty vh100 main-bg drag">
        <n-empty size="large" description="微信，记录美好生活" style="justify-content: center;" />
      </div>
    </template>
  </div>
</template>

<script setup>
// 右侧内容是否为空，默认为true空
defineProps({
  isEmpty: {
    type: Boolean,
    default: true
  }
});
</script>

<style lang="scss" scoped>
.main-box {
  height: 100vh;
}
.left-box {
  width: 225px;
  .main-list {
    height: calc(100vh - 64px);
    overflow-y: auto;
    background-color: #f7f7f7;
    position: relative;
  }
}
.right-box {
  flex: 1;
  border-left: 1px solid #D6D6D6;
}
.main-content-right {
  height: calc(100vh - 68px);
  overflow-y: auto;
}
.all-empty {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
